import { ref, reactive } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('counter', () => {
  // 登录页面three页面数据
  const threeArr = [
    { name: '着色器案例', path: '/shader' },
    { name: 'three模板', path: '/template' },
    { name: '水平面', path: '/water' },
  ]
  
  const token = ref('')
  // 登录
  function loginIn() {
    token.value = '这是登录返回的token'
  }
  // 退出登录
  function loginOut() {
    console.log('退出成功')
    token.value = ''
  }

  // 用户头像
  const avatar = ref('https://img2.baidu.com/it/u=1950213543,785138319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500')

  // 侧边栏logo是否展开
  const collapse = ref(true)
  function toggleSideBar() {
    collapse.value = !collapse.value
  }

  // header的刷新当前组件数据
  const current = ref(false)
  function refush() {
    current.value = !current.value
  }

  return { threeArr, token, loginIn, loginOut, avatar,collapse, toggleSideBar,current, refush}
}, 
{
  // 用pinia-plugin-persistedstate插件缓存在localstorage里面
  // 会缓存token，avatar，collapse
  persist: true, 
})
